<template>
  <div class="forward-origin-comment">
    
    <div v-for="(forwardArr, index) in commentForwardMap" :key="index">
      <!-- 转发附言区 -->
      <div v-if="forwardArr[-1]">
        <div class="forward-title">
          <div class="background-circle"></div>
          <span class="postscript-member"
            >{{$i18n("collaboration.summary.label.postscript", index, forwardArr[-1].length)}}</span
          >
        </div>
        <div v-for="forwardItem in forwardArr[-1]" :key="forwardItem.id">
          <div class="forward-message">
            <div class="forward-header">
              <img
                @click.stop="showBaseInfo(forwardItem.createId)"
                icon="user"
                :src="forwardItem.avatarImageUrl"
                @mouseover.once="
                  forwardItem.avatarImageUrl = forwardItem.avatarImageUrl.replace(
                    'igonregif=0',
                    'igonregif=1'
                  )
                " />
              <span class="sender-name">
                {{ forwardItem.createName }}
              </span>
              <a-tooltip
                v-if="forwardItem.departmentFullName"
                arrowPointAtCenter="true"
                :title="forwardItem.departmentFullName">
                <span class="sender-department">{{ forwardItem.departmentName }}</span>
              </a-tooltip>
            </div>
            <div class="forward-content" v-html="forwardItem.escapedContent">
            </div>
            <div class="forward-footer">
              <span>{{ forwardItem.createDateStr }}</span>
              <span v-if="forwardItem.praiseToSummary">
                <span class="syIcon sy-praise"></span>
                <span>{{ forwardItem.praiseNumber }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="forwardArr[0]" class="forward-title">
        <div class="background-circle"></div>
        <span class="postscript-member">
          {{$i18n("collaboration.summary.label.praise.and.forward", index, allCommentCountMap[index], forwardPraiseCountMap[index])}}
        </span>
      </div>
      <div v-if="forwardArr[0]">
        <OpinionAreaItem
          :isForward="true"
          v-for="item in forwardArr[0]"
          :key="item.id"
          :rootId="item.id"
          :canReply="false"
          :data="item"
          :replyItem="null"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import OpinionAreaItem from './opinion-area-item.vue';

  export default {
    name: 'OriginComment',
    components: {
      OpinionAreaItem
    },
    props: {
      commentForwardMap: {
        type: Object,
        default: () => ({})
      },
      allCommentCountMap: {
        type: Object,
        default: () => ({})
      },
      forwardPraiseCountMap: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        commentForwardExpand: true,
      };
    },
  };
</script>

<style scoped lang="scss">
  .forward-origin-comment {
    
    .forward-title {
      position: relative;
      height: 20px;
      margin-top: 12px;
      margin-bottom: 8px;
      .background-circle {
        position: absolute;
        width: 16px;
        height: 16px;
        background-image: linear-gradient(138deg, #ffffff 0%, #50a1ff 100%);
        border-radius: 50%;
      }

      .postscript-member {
        position: absolute;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        top: 3px;
        left: 5px;
      }
    }

    .forward-message {
      background-color: #ffffff;
      border: 0.5px solid #f0f0f0;
      border-radius: 2px;
      padding: 12px 12px 14px;
      margin: 10px 0;
      &:hover {
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 0 12px 0 rgba(0, 0, 0, 0.03);
      }
      .forward-header > img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .sender-name {
        font-size: 12px;
        color: #333333;
        font-weight: 500;
      }

      .sender-department {
        color: #999999;
        font-size: 12px;
      }

      .forward-content {
        margin-top: 8px;
        margin-bottom: 6px;
      }

      .forward-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        color: #999999;
      }

      .sy-praise {
        font-size: 14px;
        margin-right: 4px;
        // color: #999999;
      }
    }
  }
</style>